/**
 * 系统内置属性组件
 */
var resourceHtml = '<div v-show="false"><slot></slot></div>';
const VueBus = new Vue();
//CSS·组件
Vue.component("css", {
    props: ["src"],
    template: resourceHtml,
    created: function () {
        var self = this;
        //内联样式
        if (this.$slots.default) {
            var css = "<style>" + this.$slots.default[0].text + '</style>';
            //防止重复加载资源
            if ($("head").html().indexOf(css) === -1) {
                $("head").append(css);
            }
        }

        //外联样式
        if (this.src) {

            //防止重复加载资源
            if ($("head").html().indexOf(this.src) === -1) {
                var styleNode = createLink(this.src);
            } else {
            }
        }

    }
});
//JavaScript脚本·组件
Vue.component("js", {

    props: ["src"],
    template: resourceHtml,
    created: function () {
        var self = this;
        if (this.$slots.default) {
            var script = "<script>" + this.$slots.default[0].text + "</script>";
            $("body").append(script);
            //如果有外部JS，则以外部JS加载完成时间为准
            if (this.$parent.data.outerCountJs === 0) {
                setTimeout(function () {
                    self.$parent.data.lazyLoad = true;
                }, 10);
            }
        }

        //外联js
        if (this.src) {
            const s = document.createElement('script');
            s.setAttribute('src', this.src);
            s.setAttribute('charset', 'utf-8');
            document.body.appendChild(s);
        }
    }
});
Vue.component("elForm", {template: '<div><slot></slot></div>'})
Vue.component("elRow", {template: '<van-row><slot></slot></van-row>'})
Vue.component("elCol", {
    props: {
        span: [Number, String],
        offset: [Number, String],
        tag: {
            type: String,
            default: 'div'
        }
    },
    template: '<van-col :span="span"><slot></slot></van-col>'
})
Vue.component("dkDiy", {
    props: {
        diyData: {
            default: () => {
                return {}
            },
            type: [Object]
        }
    },
    data() {
        return {
            option: {
                submitBtn: false,
                resetBtn: false
            }
        }
    },
    computed: {
        pageConfig() {
            return this.diyData.config
        },
        rule() {
            return this.diyData.rule
        }
    },
    template: `
        <dk-box :page-config="pageConfig" v-if="diyData">
            <form-create :option="option" :rule="rule"></form-create>
        </dk-box>
    `
})
Vue.component("dkRow", {
    props: {
        setting: {
            default: () => {
            },
            type: [Object,Array]
        }
    },
    computed: {
        _style() {
            const setting = this.setting||{}
            var style = "";
            if (setting.padding) {
                style += "padding:" + setting.padding + ";";
            }
            if (setting.margin) {
                style += "margin:" + setting.margin + ";";
            }
            if (setting.bg_color) {
                style += "background-color:" + setting.bg_color + ";";
            }
            if (setting.radius) {
                if (!isNaN(setting.radius)) {
                    setting.radius = setting.radius + 'px'
                }
                style += "border-radius:" + setting.radius + ";";
            }
            if (setting.position === 'custom') {
                if (setting.left) {
                    style += "left:" + setting.left + ';';
                }
                if (setting.right) {
                    style += "right:" + setting.right + ';';
                }
                if (setting.top) {
                    style += "top:" + setting.top + ';';
                }
                if (setting.bottom) {
                    style += "bottom:" + setting.bottom + ';';
                }
            }
            if (setting.customStyle) {
                style += setting.customStyle;
            }
            if (setting.loop_animate) {
                style += 'animation-duration:' + (setting.animation_duration || 1) + 's;'
                style += 'animation-iteration-count:' + (setting.animation_iteration_count || 'infinite;')
            }
            if (setting.shadow_type === '1') {
                style += 'filter: drop-shadow(' + setting.shadow + ');'
            }
            if (setting.shadow_type === '2') {
                style += 'box-shadow:' + setting.shadow + ';'
            }
            return style;
        },
        _animate() {
            if (this.setting.loop_animate) {
                return 'animate__animated animate__' + this.setting.loop_animate + ' '
            } else {
                return 'animate__animated animate__' + this.setting.animate
            }
        },
        _position() {
            return this.setting.position ? "diy-fixed " + this.setting.position : ""
        },
        dragToolStyle() {
            console.log(this.setting.loop_animate && this.setting.animation_preview)
            if (this.setting.loop_animate && this.setting.animation_preview) {
                return {
                    animationDuration: (this.setting.animation_duration || 1) + 's',
                    animationIterationCount: this.setting.animation_iteration_count || 'infinite'
                }
            } else {
                return {}
            }
        }
    },
    mounted() {
    },
    template: '<div class="dk-row box" :class="[_animate,_position]"  :style="_style"><slot></slot></div>'
})
Vue.component("dkBox", {
    props: {
        pageConfig: {
            default: () => {
            },
            type: [Object, Array]
        }
    },
    watch: {
        pageConfig(val) {
            this.config = val
        }
    },
    computed: {
        _style() {
            const s = this.config || {}
            console.log(s)
            return {
                padding: s.padding,
                margin: s.margin,
                background: s.bg_img ? 'url(' + s.bg_img + ') top / 100% no-repeat  ' : '',
                backgroundColor: s.bg_color,
                minHeight: '100vh'
            }
        }
    },
    data() {
        return {
            config: this.pageConfig
        }
    },
    mounted() {
        console.log(this.pageConfig)
    },
    template: `<div :style="_style"><slot></slot></div>`
})
Vue.component("DkGridCellList", {
    props: {
        value: {
            default: '',
            type: String
        },
        imgRadius: {
            default: 0,
            type: Number
        },
        gridCellList: {
            default: () => {
            },
            type: [Array]
        },
        fontSize: {
            default: 14,
            type: Number
        },
        type: {
            default: 'cell',
            type: String
        },
        cellImgSize: {
            // 列表图片大小
            default: 20,
            type: Number
        },
        imgTextGutter: {
            // 图文间距
            default: 0,
            type: Number
        },
        // 下面是宫格配置
        columnNum: {
            // 宫格列数
            default: 4,
            type: Number
        },
        square: {
            // 是否为正方形
            default: false,
            type: Boolean
        },
        gutter: {
            // 间距
            default: 0,
            type: Number
        },
        direction: {
            // 横向布局
            default: 'vertical',
            type: String
        },
        clickable: {
            // 点击效果
            default: true,
            type: Boolean
        },
        border: {
            // 显示边框
            default: true,
            type: Boolean
        },
        gridImgSize: {
            // 宫格图片大小
            default: 40,
            type: Number
        }
    },
    mounted() {
    },
    methods: {
        handleClick(item) {
            var url = item.url.url || ''
            if (url) {
                dk.to(url)
            }
        }
    },
    template: `
          <div>
    <div v-if="type==='cell'" class="cell">
      <van-cell-group>
        <template v-for="(item,key) in gridCellList">
          <van-cell v-if="item.show" :key="key" is-link :style="{lineHeight:cellImgSize+'px!important' }" @click="handleClick(item)">
            <template #icon>
              <img :src="item.img" :alt="item.title" :width="cellImgSize" :height="cellImgSize" style="margin-right: 10px" :style="{borderRadius:imgRadius+'px',marginRight:imgTextGutter+'px'}">
            </template>
            <template #title>
              <span class="custom-title" :style="{fontSize:fontSize+'px'}">{{ item.title }}</span>
            </template>
            <template #right-icon>
              <div style="color: #999;font-size: 16px"><van-icon name="arrow" ></van-icon></div>
            </template>
          </van-cell>
        </template>
      </van-cell-group>
    </div>
    <div v-else class="grid">
      <van-grid :square="square" :direction="direction" :gutter="gutter" :clickable="clickable" :border="border" :column-num="columnNum">
        <template v-for="(item,key) in gridCellList">
          <van-grid-item v-if="item.show" :key="key" icon="photo-o" @click="handleClick(item)">
            <template #icon>
              <img :src="item.img" :width="gridImgSize" :height="gridImgSize" :alt="item.title" :style="{borderRadius:imgRadius+'px'}">
            </template>
            <template #text>
              <span :style="{fontSize:fontSize+'px'}" style="margin-top: 5px">{{ item.title }}</span>
            </template>
          </van-grid-item>
        </template>

      </van-grid>
    </div>
  </div>`
})
Vue.component("dkSwipe", {
    props: {
        value: {
            default: '',
            type: String
        },
        height: {
            default: '',
            type: [Number, String]
        },
        autoplay: {
            default: 3000,
            type: [Number, String]
        },
        swipeList: {
            default: () => [],
            type: [Array]
        },
        fit: {
            default: 'fill',
            type: String
        },
        bgColor: {
            default: '',
            type: String
        }
    },
    mounted() {
    },
    methods: {
        handleClick(item) {
            var url = item.url.url || ''
            if (url) {
                dk.to(url)
            }
        }
    },
    template: '<div> ' +
        ' <van-swipe class="my-swipe" :autoplay="autoplay" indicator-color="white" :style="{background: bgColor||\'\'}">' +
        '    <van-swipe-item v-for="(item, key) in swipeList" :key="key">' +
        '     <van-image :src="item.img" :fit="fit" width="100%" :height="height" @click="handleClick(item)"/>' +
        '    </van-swipe-item>' +
        '  </van-swipe></div>'
})
Vue.component('dkWxUserInfo', {
    props: {
        value: {
            default: '',
            type: String
        },
        avatarSize: {
            // 头像大小
            default: 50,
            type: [Number, String]
        },
    },
    data() {
        return {
            userinfo: {}
        }
    },
    mounted() {
        dk.post('/h5/user/getUserInfo').then(res => {
            this.userinfo = res.data
        })
    },
    template: `
  <div>
    <div class="user-info cl">
      <div class="avatar">
        <img :src="userinfo.avatar" alt="" :width="avatarSize" :height="avatarSize">
      </div>
      <div class="info">
        <h3>{{userinfo.nickname}}</h3>
        <p><span>{{userinfo.openid}}</span></p>
      </div>
      <div class="el-icon-arrow-right y" :style="'line-height: '+avatarSize+'px'" />
    </div>
    <css>
    .user-info {
    background:#fff;
  padding: 10px;
}
.user-info .avatar{
   float: left;
    margin-right:  10px;
}
.user-info .info{float: left;}
.user-info .info h3{     font-size: 16px;
      margin-bottom: 5px;}
      .user-info span{ color: #999;}
  .el-icon-arrow-right{
    font-size: 20px;
    line-height: 50px;
  }
    </css>
  </div>
`
})
Vue.component("DkNavBar", {
    props: {
        title: {
            default: '',
            type: String
        },
        rightText: {
            default: '',
            type: String
        },
        rightTextUrl: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        leftTextUrl: {
            default: '',
            type: String
        },
        fixed: {
            default: true,
            type: Boolean
        },
        leftArrow: {
            default: true,
            type: Boolean
        },
        border: {
            default: true,
            type: Boolean
        },
        placeholder: {
            default: false,
            type: Boolean
        }
    },
    mounted() {
    },
    methods: {
        clickLeft() {
            window.location.href = this.leftTextUrl
        },
        clickRight() {
            window.location.href = this.rightTextUrl
        }
    },
    template: `  <div>
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :right-text="rightText"
      :left-arrow="leftArrow"
      :border="border"
      @click-left="clickLeft()"
      @click-right="clickRight()"
      :z-index="99"
    />
  </div>`
})
Vue.component('DkVideo', {
    props: {
        poster: {
            default: "",
            type: String
        },
        isHeight: {
            default: true,
            type: Boolean
        },
        height: {
            default: 240,
            type: Number
        },
        videoPath: {
            default: "",
            type: String
        },
        isOpenClose: {
            default: true,
            type: Boolean
        }
    },
    data() {
        return {
            show: this.showQr,
            intervalId: null,
            // height: 240,
            y: 0,
            width: "100%",
        }
    },
    computed: {
        _style() {
            var style = {}
            if (this.height && this.isHeight) {
                style.height = this.height + 'px'
            } else {
                // style.height = '240px'
            }
            return style
        }
    },
    watch: {},
    mounted() {
        if (this.isOpenClose) {
            let that = this;
            that.$nextTick(function () {
                //监听滚动事件
                window.addEventListener('scroll', that.handleScroll)
            })
        }
    },
    methods: {
        handleScroll() {
            var rect = this.$refs['video'].getBoundingClientRect()
            this.height = rect.height
            if (this.y - rect.y > 0) {
                //上滑
                if (rect.top <= 10 && this.height >= 0) {
                    this.width = "0"
                }
            } else {
                //下滑
                if (this.height <= 0 && rect.top >= 0) {
                    this.width = "100%"
                }
            }
            this.y = rect.y
        }
    },
    template: ` 
<div style="background: #000">
  <video 
       :width="width" 
       controls :poster="poster"  
       ref="video"
       :style="_style"
       style="margin: 0 auto;transition: all 1s cubic-bezier(0.84, 0, 0.29, 0.99) 0s;display: block;"
       >
       <source :src="videoPath" type="video/mp4">
  </video>
</div>
`
})
Vue.component('DkTextarea', {
    props: {
        textarea: {
            default: "",
            type: String
        }
    },
    template: `
    <div v-html="textarea"></div>
    `
})
Vue.component('CheckUser', {
    props: {
        title: {
            default: '获取你的昵称，头像',
            type: String
        },
        message: {
            default: '允许我们在必要的场景下，合理使用您的个人信息，并且充分保障您的合法权益',
            type: String
        },
        cancelUrl: {
            default: '',
            type: String
        }
    },
    mounted() {
        var addon = dk.getCookie('dk_addon')
        var topuid = dk.getCookie('dk_topuid')
        var back_url = window.location.href
        dk.post('/h5/user/getUserInfoForce', {back_url, topuid, addon}).then(res => {
            if (res.code === -1) {
                this.$dialog.confirm({
                    title: this.title,
                    message: this.message,
                    beforeClose: (ac, done) => {
                        if (ac === 'confirm') {
                            window.location.href = res.data.url
                        } else {
                            if (this.cancelUrl) {
                                window.location.href = this.cancelUrl
                            } else {
                                this.$toast("点击左上角关闭")
                            }
                        }
                        done(false)
                    }
                }).then(() => {
                }).catch(() => {
                })
            }
        })
    }
})
Vue.component('DkPosterBtn', {
    props: {
        posterData: {
            default: () => {
                return {}
            },
            type: [Object]
        },
        type: {
            default: 'btn',
            type: [String]
        },
        footerText: {
            default: '长按海报图片分享或保存！',
            type: [String]
        },
        listen: {default: 'aaa', type: String},
        // 图片配置
        imgSize: {default: 20, type: [String, Number]},
        img: {default: '', type: String},
        // 悬浮配置
        fBtnText: {default: '海报', type: String},
        fBgColor: {default: '#ff3d2c', type: String},
        fColor: {default: '#fff', type: String},
        fSize: {default: 20, type: [String, Number]},
        // 按钮配置
        btnText: {default: '获取推广海报', type: String},
        block: {default: true, type: Boolean},
        round: {default: true, type: Boolean},
        size: {default: 'normal', type: String},
        color: {default: '#ff3d2c', type: String},
        color2: {default: '', type: String}
    },
    data() {
        return {
            show: false,
            src: '',
            userinfo: null,
            painting: {},
            text: '',
            image: '',
            loading: true,
            url: ''
        }
    },
    methods: {
        submit() {
            if (!this.src) {
                if (!this.userinfo) {
                    dk.post('/h5/user/getUserInfo').then(res => {
                        this.userinfo = res.data
                        if (!this.url) {
                            var topuid = this.userinfo.id || 0
                            this.url = dk.addUrlPara('topuid', topuid, false)
                        }
                        this.handlePaining()
                        this.show = true
                    })
                } else {
                    this.handlePaining()
                    this.show = true
                }
            } else {
                this.show = true
            }
        },
        handlePaining() {
            var views = [];
            for (let i = 0; i < this.painting.views.length; i++) {
                var item = this.painting.views[i]
                console.log(item)
                if (!this.userinfo && (item.name === 'name' || item.name === 'avatar')) {
                    continue
                }
                switch (item.name) {
                    case "name":
                        item.text = this.userinfo.nickname
                        break;
                    case "avatar":
                        item.url = this.userinfo.avatar
                        break;
                    case "text":
                        item.text = this.text
                        break;
                    case "image":
                        item.url = this.image
                        break;
                    case "qrcode":
                        item.content = this.url
                        break;
                }
                //循环判断是否为数字
                for (let j in item.css) {
                    if (typeof item.css[j] === 'number') {
                        item.css[j] = item.css[j] + 'px'
                    }
                }
                views.push(item)
            }
            this.painting.views = views
        },
        success(src) {
            this.src = src
            this.loading = false
        },
        fail(err) {
            alert('海报配置有误：' + err)
        }
    },
    computed: {
        vanBtnColor() {
            if (this.color && this.color2) {
                return 'linear-gradient(to right, ' + this.color + ', ' + this.color2 + ')'
            } else if (this.color) {
                return this.color
            } else if (this.color2) {
                return this.color2
            } else {
                return ''
            }
        }
    },
    created() {
        this.painting = this.posterData
        this.painting.width = this.painting.width + 'px'
        this.painting.height = this.painting.height + 'px'
        this.painting.borderRadius = this.painting.borderRadius + 'px'
        if (this.listen) {
            VueBus.$on(this.listen, (res) => {
                if (res) {
                    if (res.url) {
                        this.url = res.url
                    }
                    if (res.userinfo) {
                        this.userinfo = res.userinfo
                    }
                    if (res.image) {
                        this.image = res.image
                    }
                    if (res.text) {
                        this.text = res.text
                    }
                }
                this.submit()
            })
        }
    },
    template: `
        <div>
            <js src="/assets/js/lib/poster/vue-poster.min.js"></js>
            <van-popup get-container="body" v-model="show" style="z-index:3000;width: 80%;background: none;text-align: center;min-height: 100px;display: flex ;overflow: hidden;  align-items: center;    justify-content: center;">
                <div v-if="src">
                            <van-image :src="src" width="100%" fit="cover" style="max-height: calc(100vh - 50px);overflow: auto" >
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" ></van-loading>   
                    加载中...
                  </template>
                  <template v-slot:error>
                   <van-loading type="spinner" size="20" ></van-loading>
                   加载中...
                  </template>
                </van-image>
                <div v-if="footerText" style="
    background: rgba(0,0,0,.9);
    color: #fff;
    margin-top: 5px;
    border-radius: 3px;
    padding: 10px;
">{{footerText}}</div>
</div>
                <dk-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail" v-if="!src"></dk-poster>
            </van-popup>
            <span @click="submit" v-if="type!=='event'">
                <van-button type="primary"   :block="block" :round="round" :size="size" :color="vanBtnColor"  v-if="type==='btn'">{{btnText}}</van-button>
                <div class="image-btn" v-else-if="type==='image'">
                   <img :src="img" :width="imgSize">
                </div>  
                <div class="f-btn" v-else>
                    <div
                     class="f-btn-content"
                     :style="{backgroundColor:fBgColor,width:fSize+'px',height:fSize+'px',lineHeight:fSize+'px',color:fColor}"
                     style="border-radius: 100%;text-align: center"
                     > 
                    {{fBtnText}} 
                    </div>
                </div>
            </span>
        </div>
`
})
Vue.component('DkDialog', {
    name: 'DkDialog',
    data() {
        return {
            dialogVisible: false,
            listen_data: {},
        }
    },
    props: {
        title: {default: '标题', type: String},
        show: {default: false, type: Boolean},
        content: {default: '', type: String},
        listen: {default: '', type: String},
        confirmText: {default: '确定', type: String},
        copy: {default: '0', type: Number},
        copyType: {default: 'text', type: String},
        copyText: {default: '复制的内容', type: String},
        copyHtml: {default: '复制的富文本', type: String},
        copySuccessToast: {default: '复制成功', type: String},
    },
    computed: {
        dialogTitle() {
            return this.listen_data.title || this.title
        },
        dialogContent() {
            return this.listen_data.content || this.content
        },
        confirmButtonText() {
            return this.listen_data.confirmText || this.confirmText
        },
        copyData() {
            if (this.listen_data.copyData) {
                return this.listen_data.copyData
            }
            if (this.copy === '1') {
                return this.content
            }
            if (this.copy === '2') {
                return this.copyType === 'html' ? this.copyHtml : this.copyText
            }
            return ''
        }
    },
    created() {
        if (this.listen) {
            VueBus.$on(this.listen, res => {
                if (res) {
                    this.listen_data = res
                }
                this.dialogVisible = true
            })
        }
    },
    methods: {
        handleConfirm() {
            this.copyContent()
            this.$emit('confirm')
        },
        copyContent() {
            const clipboard = new ClipboardJS('#my-dialog', {
                text: () => this.copyData
            })
            clipboard.on('success', () => {
                if (this.copySuccessToast) {
                    this.$toast(this.copySuccessToast)
                }
            })
            clipboard.on('error', () => {
                this.$toast('复制失败，请手动复制')
            })
        }
    },
    template: `
    <div>
      <js src="/assets/lib/clipboard.min.js"></js>
      <van-dialog
        id="my-dialog"
        v-model="dialogVisible"
        @confirm="handleConfirm"
        :confirm-button-text="confirmButtonText"
      >
        <template v-slot:title>{{ dialogTitle }}</template>
        <div style="padding: 10px" v-html="dialogContent"></div>
      </van-dialog>
    </div>
  `
})
Vue.component('DkCommonBtn', {
    name: "DkCommonBtn",
    props: {
        posterData: {
            default: () => {
                return {}
            },
            type: [Object]
        },
        type: {default: 'btn', type: [String]},
        event: {default: '', type: String},
        icon: {default: '', type: String},
        url: {default: '', type: String},
        click_type: {default: '', type: String},
        // 图片配置
        imgSize: {default: 20, type: [String, Number]},
        img: {default: '', type: String},
        imgText: {default: '', type: String},
        // 悬浮配置
        fBtnText: {default: '自定义文本', type: String},
        fBgColor: {default: '#ff3d2c', type: String},
        isTextBlock: {default: true, type: Boolean},
        fColor: {default: '#fff', type: String},
        fWSize: {default: 20, type: [String, Number]},
        fHSize: {default: 20, type: [String, Number]},
        borderRadius: {default: 20, type: [String, Number]},
        fontSize: {default: 12, type: [String, Number]},
        fontTopSize: {default: 0, type: [String, Number]},
        iconSize: {default: 12, type: [String, Number]},
        // 按钮配置
        btnText: {default: '按钮文字', type: String},
        block: {default: true, type: Boolean},
        round: {default: true, type: Boolean},
        size: {default: 'normal', type: String},
        color: {default: '#ff3d2c', type: String},
        color2: {default: '', type: String}
    },
    data() {
        return {}
    },
    computed: {
        textStyle() {
            if (this.isTextBlock) {
                return {
                    backgroundColor: this.fBgColor,
                    width: this.fWSize + 'px',
                    height: this.fHSize + 'px',
                    color: this.fColor,
                    borderRadius: this.borderRadius + 'px',
                    marginTop: this.fontTopSize + 'px'
                }
            } else {
                return {
                    marginTop: this.fontTopSize + 'px'
                }
            }
        },
        vanBtnColor() {
            if (this.color && this.color2) {
                return 'linear-gradient(to right, ' + this.color + ', ' + this.color2 + ')'
            } else if (this.color) {
                return this.color
            } else if (this.color2) {
                return this.color2
            } else {
                return ''
            }
        }
    },
    methods: {
        onClick() {
            if (this.click_type === 'url') {
                window.location.href = this.url
            } else {
                if (this.event) {
                    VueBus.$emit(this.event)
                }
            }
        }
    },
    mounted() {
    },
    template: `<div class="common-btn" @click="onClick">
    <div v-if="type ==='btn'" class="btn">
        <van-button type="primary" :block="block" :round="round" :size="size" :color="vanBtnColor" :icon="icon">
            {{ btnText }}
        </van-button>
    </div>
    <div v-else class="f-btn">
        <div v-if="img" class="image-content">
            <img :src="img" alt="" :width="imgSize">
        </div>
        <div :style="textStyle" class="f-btn-content">
            <van-icon :name="icon" :size="iconSize"/>
            <span :style="{fontSize:fontSize+'px'}"> {{ fBtnText }}</span>
        </div>
    </div>
</div>
    `
})
Vue.component('DkMusic', {
    name: "DkMusic",
    props: {
        musicPath: {default: '', type: String},
        // common
        iconType: {default: '', type: String}, // 图标样式
        iconSize: {default: 40, type: Number}, // 图标尺寸
        rotation: {default: 'changeRight', type: String}, // 旋转方向
        speed: {default: 5, type: Number}, // 旋转速度
        // image
        imgUrl: {default: '', type: String},// 图片地址
        loop: {default: true, type: Boolean}// 图片地址
    },
    data() {
        return {
            audio: null,
            rotationTmp: '',
            body: '',
            animateState: "paused",
            autoState: false
        }
    },
    computed: {
        _style() {
            var speed = (11 - this.speed) + 's'
            return {
                width: this.iconSize + 'px',
                height: this.iconSize + 'px',
                fontSize: this.iconSize + 'px',
                animationDuration: speed,
                animationPlayState: this.animateState,
                animationIterationCount: 'infinite',
                animationTimingFunction: 'linear'
            }
        }
    },
    mounted() {
        if (this.musicPath) {
            this.audio = new Audio(this.musicPath)
            this.body = window.document.getElementsByTagName("body")[0]
            this.initAudioAutoPlay()
            if (this.loop) {
                this.audio.onended = () => {
                    this.audio.load()
                    this.audio.play()
                }
            }
        }
    },
    methods: {
        initAudioAutoPlay() {
            this.body.addEventListener('click', () => {
                this.audioAutoPlay()
            })
            this.body.addEventListener('touchstart', () => {
                this.audioAutoPlay()
            })
        },
        audioAutoPlay() {
            if (!this.autoState) {
                this.audio.play().then(res => {
                    this.autoState = true
                    this.animateState = 'running'
                }).catch(res => {
                })
            }
        },
        handleAudio() {
            if (this.audio.paused) {
                this.audio.play()
                this.animateState = 'running'
            } else {
                this.audio.pause()
                this.animateState = 'paused'
            }
        }
    },
    template: `
    <div class="dk-music" @click="handleAudio()">
        <div v-if="iconType==='image'">
          <img :src="imgUrl" width="100%" :style="_style" :class="rotation" class="dk-music-img" alt="">
        </div>
        <van-icon v-else name="music-o" class="dk-music-icon" :class="rotation" :style="_style" />
    </div>
    `
})
Vue.component('DkTabbar', {
    name: "DkTabbar",
    props: {
        tabBars: {
            default: () => {
                return []
            },
            type: [Array]
        },
        active: {default: 0, type: Number},
        activeColor: {default: '#1989fa', type: String},
        bgColor: {default: '#fff', type: String},
        inactiveColor: {default: '#333333', type: String}
    },
    data() {
        return {
            tmpActive: this.active - 1
        }
    },
    methods: {
        click(item) {
            if (item.url) {
                window.location.href = item.url
            }
        }
    },
    template: `
<div class="dk-tabbar">
    <van-tabbar v-model="tmpActive" :active-color="activeColor" :fixed="false" :inactive-color="inactiveColor" :style="{backgroundColor:bgColor}">
      <van-tabbar-item
        v-for="(item,key) in tabBars"
        :key="key"
        :icon="item.icon"
        :dot="item.badge==='dot'"
        :badge="item.badge==='badge'?item.badge_text:''"
        @click="click(item)"
      >
        <span>{{ item.title }}</span>
        <template v-if="item.useImg ===true" #icon>
          <img :src="item.imgIcon" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
</div>
    `
})
Vue.component('DkTitle', {
    name: "DkTitle",
    props: {
        title: {default: '标题', type: String},
        size: {default: 14, type: Number},
        color: {default: '#333', type: String},
        bold: {default: false, type: Boolean},
        prefix: {default: '', type: String},
        icon: {default: 'volume', type: String},
        prefixColor: {default: '#409eff', type: String},
        prefixImage: {default: '', type: String},
        squareWidth: {default: 4, type: Number},
        squareHeight: {default: 12, type: Number},
        imageWidth: {default: 24, type: Number},
        imageHeight: {default: 24, type: Number},
        iconSize: {default: 18, type: Number},
        titleMarginLeft: {default: 4, type: Number},
        rTitle: {default: '更多', type: String},
        rColor: {default: '#999', type: String},
        rSize: {default: 12, type: Number},
        rUrl: {default: "", type: String},
        showRight: {default: false, type: Boolean}
    },
    data() {
        return {}
    },
    methods: {
        clickRight() {
            if (this.rUrl) {
                window.location.href = this.rUrl
            }
        }
    },
    template: `
  <div class="dk-title">
    <div class="title-left">
      <van-icon v-if="prefix === 'icon'" :name="icon" :style="{color:prefixColor,fontSize:iconSize+'px'}" />
      <van-image v-if="prefix==='image'" :src="prefixImage" alt="" class="dk-title-img" :width="imageWidth" :height="imageHeight" />
      <div v-if="prefix==='square'" :style="{width:squareWidth+'px',height:squareHeight+'px',background:prefixColor}" />
      <div :style="{marginLeft:titleMarginLeft+'px',color:color,fontSize:size+'px',fontWeight:bold?800:400}">
        {{ title }}
      </div>
    </div>
    <div v-if="showRight" class="title-right" :style="{color:rColor,fontSize: rSize+'px'}" @click="clickRight">
      {{ rTitle }}
    </div>
  </div>
    `
})
Vue.component('DkImage', {
    name: "DkImage",
    props: {
        value: {default: '', type: String},
        type: {default: 'default', type: String},
        textType: {default: 'default', type: String},
        heightAuto: {default: false, type: Boolean},
        showText: {default: false, type: Boolean},
        height: {default: '', type: [Number, String]},
        width: {default: '', type: [Number, String]},
        borderRadius: {default: '', type: [Number, String]},
        marginBottom: {default: '', type: [Number, String]},
        marginRight: {default: '', type: [Number, String]},
        imageList: {default: () => [], type: [Array]},
        fit: {default: 'cover', type: String}
    },
    computed: {
        _style() {
            var style = {}
            if (this.type === 'default') {
                style['marginBottom'] = this.marginBottom + 'px'
            } else {
                style['width'] = this.width + '%'
                style['marginRight'] = this.marginRight + 'px'
            }
            style['borderRadius'] = this.borderRadius + 'px'
            return style
        }
    },
    data() {
        return {}
    },
    methods: {
        onClickImage(item) {
            if (item.url.url) {
                window.location.href = item.url.url
            }
        }
    },
    template: `
  <div class="dk-image" :class="'dk-image-'+type">
    <div v-for="(item, key) in imageList" :key="key" class="dk-image-content" :style="_style" @click="onClickImage(item)">
      <van-image
        :src="item.img"
        :fit="fit"
        width="100%"
        :height="heightAuto?height:''"
        style="overflow:hidden;"
      />
      <div v-if="showText && item.title" :class="'text-type-'+textType">{{ item.title }}</div>
    </div>
  </div>
    `
})
Vue.component('DkBulletChat', {
    name: "DkBulletChat",
    props: {
        bgColor: {default: '', type: String},
        textColor: {default: '', type: String},
        dataType: {default: 'default', type: String}, // 内容来源
        eventName: {default: '', type: String}, // 事件名称
        autoplay: {default: 3000, type: Number},
        bulletData: {
            default: () => {
                return []
            }, type: Array
        }
    },
    computed: {
        _bulletData() {
            if (this.dataType === 'default') {
                return this.bulletData
            } else {
                return this.eventBulletData
            }
        }
    },
    created() {
        VueBus.$on(this.eventName, (data) => {
            // var data = [{avatar:'',text:''}]
            this.eventBulletData = data
        })
    },
    data() {
        return {
            eventBulletData: []
        }
    },
    methods: {},
    template: `
  <div>
    <van-swipe
      vertical
      class="bullet-notice-swipe"
      :style="{background:bgColor,color:textColor}"
      :autoplay="autoplay"
      :show-indicators="false"
      v-if="_bulletData.length>0"
    >
      <van-swipe-item v-for="(item,key) in _bulletData" :key="key">
        <div class="bullet-content">
          <img v-if="item.avatar" :src="item.avatar" alt="">
          <span class="over" v-html="item.text"></span>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
    `
})
Vue.component('DkNoticeBar', {
    name: "DkBulletChat",
    props: {
        leftIcon: {default: '', type: String},
        text: {default: '', type: String},
        url: {default: '', type: String},
        background: {default: '', type: String},
        color: {default: '', type: String},
        speed: {default: 60, type: Number}
    },
    computed: {},
    created() {
    },
    data() {
        return {}
    },
    methods: {
        onClick() {
            if (this.url) {
                window.location.href = this.url
            }
        }
    },
    template: `
    <van-notice-bar
       @click="onClick"
      :speed="speed"
      :left-icon="leftIcon"
      :text="text"
      :color="color"
      :background="background"
    />
    `
})

